<!DOCTYPE html>
<html lang="zh-CN">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>

<body>
   <canvas id="c1" width="800" height="800"></canvas>
   <script>
      const c1 = document.getElementById('c1')
      const ctx = c1.getContext("2d")
      // 绘制圆弧的方法arc(圆心x，圆心y，半径，开始的角度，结束的角度，逆时针或顺时针(默认为顺时针false))
      // ctx.arc(400, 400, 50, 0, Math.PI / 2, true)
      // ctx.fill()

      // // 使用圆弧绘制笑脸
      // // 脸
      // ctx.beginPath()
      // ctx.arc(200, 200, 100, 0, Math.PI * 2)
      // ctx.stroke()
      // ctx.closePath()
      // // 眼睛左
      // ctx.beginPath()
      // ctx.arc(160, 170, 10, 0, Math.PI * 2)
      // ctx.stroke()
      // ctx.closePath()
      // // 眼睛右
      // ctx.beginPath()
      // ctx.arc(240, 170, 10, 0, Math.PI * 2)
      // ctx.stroke()
      // ctx.closePath()
      // // 嘴巴
      // ctx.beginPath()
      // ctx.arc(200, 220, 50, Math.PI / 6, Math.PI / 6 * 5)
      // ctx.stroke()
      // ctx.closePath()

      // 使用moveTo来移动点
      // ctx.beginPath()
      // // 脸
      // ctx.arc(200, 200, 100, 0, Math.PI * 2)
      // ctx.moveTo(170, 170)
      // // 眼睛左
      // ctx.arc(160, 170, 10, 0, Math.PI * 2)
      // ctx.moveTo(250, 170)
      // // 眼睛右
      // ctx.arc(240, 170, 10, 0, Math.PI * 2)
      // ctx.moveTo(245, 245)
      // // 嘴巴
      // ctx.arc(200, 220, 50, Math.PI / 6, Math.PI / 6 * 5)
      // ctx.stroke()
      // ctx.closePath()

      // 使用arcTo绘制圆弧
      ctx.beginPath()
      ctx.moveTo(400, 400)
      ctx.arcTo(400, 500, 300, 500, 100)
      ctx.stroke()
      ctx.closePath()

   </script>
</body>

</html>